<template>
  <div><ul>                                                 
                                                              <!--如果当前类名的下标等等与点击的下标的话就显示，否则就不显示  -->
      <li v-for="(i,index) in arr" @click="db(index)" :class="{active:index==bool}">{{i}}</li>
      </ul></div>
</template>

<script>
//require自动寻找图片路径
export default {
  data() {
    return {
      arr: ["阿迪鞋子", "耐克鞋子", "安踏鞋子", "361度鞋子"],
      bool:0
    };
  },
  methods: {
      db(index){
        this.bool=index
      }
  },
};
</script>
<style lang="css">
  .active{
    color: red;
 
  }


</style>
